<template>
	<view
		class="relative border-box"
		:style="{ 'padding-bottom': (hideBottom || selfBottom ? 0 : pagePb) + 'px' }"
		:class="[extraClass || '']"
	>
		<slot />
		<view
			v-if="!hideBottom"
			class="bottom fixed inset-x-0 bottom-0 z-30"
			:class="[bottomPdClass, bottomExtraClass || '']"
		>
			<slot name="bottomPrefix" />
			<slot name="bottom"> <c-button @touch="submit" :disabled="disabled" :text="submitText" /> </slot>
			<view class='safe-height' />
		</view>
	</view>
</template>

<script>
import { getCurrentInstance, ref, onMounted } from 'vue';
export default {
	props: {
		submitText: { default: '提交', type: String },
		bottomPdClass: {
			default: 'p-3-1',
			type: String,
		},
		bottomExtraClass: String,
		extraClass: String,
		disabled: Boolean,
		hideBottom: Boolean,
		//自定义底部占位
		selfBottom: Boolean,
	},
	setup(props, ctx) {
		const { ctx: curCtx } = getCurrentInstance();
		const pagePb = ref(0);
		function resize(){
			if (props.hideBottom) return;
			uni
				.createSelectorQuery()
				.in(curCtx)
				.select('.bottom')
				.boundingClientRect((data) => {
					pagePb.value = data.height;
					if(props.selfBottom){
						ctx.emit("bottomResize", {
							height: data.height
						});
					}
				})
				.exec();
		}
		onMounted(() => {
			resize();
		});
		function submit() {
			ctx.emit('submit');
		}
		return {
			pagePb,
			submit,
			resize,
		};
	},
};
</script>

<style lang="scss">
</style>
